<template>
  <!-- <div class="box"><i class="top"></i><i class="bottom"></i></div> -->
  <div class="p-card">
    <n-card>
      <div class="p-h1" style="gap: 50px">
        <div class="p-h1">
          <n-dropdown :options="options" size="small">
            <n-avatar round :size="58" :src="headUrl" />
          </n-dropdown>
          <div>
            <div class="p-span">
              <n-icon size="30">
                <img
                  :src="imageList[0]"
                  style="width: 100%; height: 100%"
                  alt=""
                  srcset=""
                />
              </n-icon>

              <span
                v-for="(item, index) in presentTimeText"
                :style="{ '--i': index + 1 }"
                >{{ item }}</span
              >
              <span :style="{ '--i': presentTimeText.length + 1 }">，</span>
              <span :style="{ '--i': presentTimeText.length + 2 }">欢</span>
              <span :style="{ '--i': presentTimeText.length + 3 }">迎</span>
              <span :style="{ '--i': presentTimeText.length + 4 }">回</span>
              <span :style="{ '--i': presentTimeText.length + 5 }">来</span>
              <span :style="{ '--i': presentTimeText.length + 6 }" class="shake">👋</span>
              <span :style="{ '--i': presentTimeText.length + 7 }"> < </span>
              <span
                v-for="(item, index) in userName"
                :style="{ '--i': presentTimeText.length + 7 + index + 1 }"
                >{{ item }}</span
              >
              <span :style="{ '--i': presentTimeText.length + userName.length + 8 }">
                ></span
              >
            </div>
            <div>
              <span style="font-size: 13px; font-weight: 400; color: #bdc1c4"
                >{{ weatherData.high + " - " + weatherData.low }}
                {{ " - " + weather[weatherData.type] }}</span
              >
            </div>
          </div>
        </div>

        <div>
          <!-- <myFlipClock /> -->
        </div>
      </div>
    </n-card>
    <!-- <div>
      <n-grid x-gap="12" :cols="2">
        <n-gi>
          <n-card>
            <p style="display: flex;align-items: center;gap: 5px;">
              一言
              <n-button color="#e0e0e6" dashed="true" circle size="tiny" style="width: 15px;height: 15px;">
                <template #icon>
                  <n-icon size="10" :depth="1">
                    <RefreshSharp />
                  </n-icon>
                </template>
</n-button>
<n-button @click="copyWord" color="#e0e0e6" dashed="true" circle size="tiny" style="width: 15px;height: 15px;">
  <template #icon>
                  <n-icon size="10" :depth="1">
                    <CopyOutline />
                  </n-icon>
                </template>
</n-button>
</p>
<n-tag :bordered="false">
  {{ wordData }}
</n-tag>
</n-card>
</n-gi>
<n-gi>
  <n-card>
    <p>登录记录</p>
    <div class="p-h2">
      <n-tag type="success" :bordered="false" round size="small">
        192.168.1.123
        <template #icon>
                  <n-icon :component="LocationSharp" />
                </template>
      </n-tag>

      <n-tag type="success" :bordered="false" round size="small">
        中国 广东 广州
        <template #icon>
                  <n-icon :component="TrailSignSharp" />
                </template>
      </n-tag>

      <n-tag type="success" :bordered="false" round size="small">
        2024-01-01 01:01:00
        <template #icon>
                  <n-icon :component="Timer" />
                </template>
      </n-tag>
    </div>

  </n-card>
</n-gi>
</n-grid>
</div> -->

    <div class="page-main">
      <div class="card">
        <div class="card-item">
          <n-card>
            <p style="display: flex; align-items: center; gap: 5px">
              一言
              <n-button
                color="#e0e0e6"
                dashed="true"
                circle
                size="tiny"
                style="width: 15px; height: 15px"
                @click="refreshWord(false)"
              >
                <template #icon>
                  <n-icon size="10" :depth="1">
                    <RefreshSharp />
                  </n-icon>
                </template>
              </n-button>
              <n-button
                @click="copyWord"
                color="#e0e0e6"
                dashed="true"
                circle
                size="tiny"
                style="width: 15px; height: 15px"
              >
                <template #icon>
                  <n-icon size="10" :depth="1">
                    <CopyOutline />
                  </n-icon>
                </template>
              </n-button>
            </p>
            <div class="p-word">
              <span>{{ wordData.content }}</span>
              <span style="text-align: right; color: #929699; font-size: 0.7rem"
                >---{{ wordData.origin }}</span
              >
            </div>
          </n-card>
        </div>

        <div class="card-item">
          <n-card>
            <p>数据统计</p>
            <div class="p-tag">
              <n-card class="p-tag-card" title="文章" hoverable> 卡片内容 </n-card>

              <n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card>

              <n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card>

              <n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card>
              <n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card
              ><n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card
              ><n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card
              ><n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card
              ><n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card
              ><n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card
              ><n-card class="p-tag-card" title="悄悄话" hoverable> 卡片内容 </n-card>
            </div>
            <!-- <n-grid x-gap="12" :cols="3">
              <n-gi>
                <n-card class="p-tag-card" title="文章" hoverable>
                  卡片内容
                </n-card>
              </n-gi>
              <n-gi>
                <n-card class="p-tag-card" title="悄悄话" hoverable>
                  卡片内容
                </n-card>
              </n-gi>
              <n-gi>
                <div class="light-green" />
              </n-gi>
            </n-grid> -->
          </n-card>
        </div>
        <div class="card-item">
          <n-card>
            <p>登录记录</p>
            <div class="p-h2">
              <div class="p-h2-d1">
                <n-tag type="success" :bordered="false" round size="small">
                  {{ ipInfo.ip }}
                  <template #icon>
                    <n-icon :component="LocationSharp" />
                  </template>
                </n-tag>

                <n-tag type="success" :bordered="false" round size="small">
                  {{ ipInfo.address }}
                  <template #icon>
                    <n-icon :component="TrailSignSharp" />
                  </template>
                </n-tag>

                <n-tag type="success" :bordered="false" round size="small">
                  {{ ipInfo.time }}
                  <template #icon>
                    <n-icon :component="Timer" />
                  </template>
                </n-tag>
              </div>
              <div class="p-h2-d2">
                <n-button type="primary" @click="jumpWebsite" dashed>
                  <template #icon>
                    <n-icon><AlbumsOutline /></n-icon>
                  </template>
                  藏宝阁快捷入口
                </n-button>
                <!-- <n-scrollbar style="max-height: 100px" :on-scroll="checkUrlScroll">
                  <n-timeline style="gap: 0px">
                    <template v-for="(item, index) in urlList" :key="index">
                      <div class="timeline-item">
                        <n-popover trigger="hover" placement="bottom" duration="5">
                          <template #trigger>
                            <span
                              @click="openExternalLink(item.url)"
                              class="fadeIn-p"
                              style="width: auto"
                              >{{
                                item.url.length > 30
                                  ? item.url.substring(0, 30) + "..."
                                  : item.url
                              }}</span
                            >
                          </template>
                          <span>{{ item.text + "：" + item.url }}</span>
                        </n-popover>
                      </div>
                    </template>
                  </n-timeline>
                </n-scrollbar> -->
              </div>
            </div>
          </n-card>
        </div>
        <div class="card-item">
          <n-card>
            <p>最近发生的事&#128515;</p>
            <n-scrollbar style="max-height: 400px" :on-scroll="checkScroll">
              <n-timeline ref="myScrollbar">
                <template v-for="(item, index) in diaryList" :key="index">
                  <n-timeline-item :time="item.time">
                    <div class="timeline-item">
                      <!-- <span style="color: #9b9b9b;">{{ item.time }}</span> -->
                      <span class="fadeIn-p" style="width: auto">
                        {{ item.title }}
                      </span>
                    </div>
                    <!-- <span style="color: #9b9b9b;font-size: 14px;white-space: nowrap;">{{ item.label }}</span> -->
                  </n-timeline-item>
                </template>
              </n-timeline>
              <div class="fade-overlay top" ref="fadeOverlayTop"></div>
              <div class="fade-overlay bottom" ref="fadeOverlayBottom"></div>
            </n-scrollbar>

            <!-- <n-timeline>
              <n-timeline-item content="啊" />
              <n-timeline-item type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
              <n-timeline-item type="error" content="哪里错误" time="2018-04-03 20:46" />
              <n-timeline-item type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
              <n-timeline-item type="info" title="信息" content="是的" time="2018-04-03 20:46" line-type="dashed" />
              <n-timeline-item content="啊" />
            </n-timeline> -->
          </n-card>
        </div>
        <div class="card-item">
          <n-card>
            <p>表情&#128515;</p>
            <emoji :size="23" />
            <span>{{ myEmoji }}</span>
            <div>
              <n-button @click="btn_info">弹出信息</n-button>
            </div>
          </n-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, h } from "vue";
import { NAvatar, NIcon, NAlert } from "naive-ui";
import { getWeatherByCity, getIp, getEverydaySaid } from "@/api/home";
import {
  LocationSharp,
  Timer,
  RefreshSharp,
  CopyOutline,
  TrailSignSharp,
  AlbumsOutline,
} from "@vicons/ionicons5";
import myFlipClock from "./components/FlipClock.vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { adminMenus } from "@/data/menu.ts";

const router = useRouter();
const store = useStore();
const imageList = Object.values(import.meta.globEager("@/assets/img/weather/*.*")).map(
  (v) => v.default
);
const userName = ref("Polaris");
const headUrl = ref("/src/assets/img/head.jpg");
const wordData = ref("低头要有勇气，抬头要有底气");
const weather = ref({
  小雨: "🌨️",
  阴: "☁️",
  中雨: " 🌦️",
  大雨: "🌧️",
  晴: "☀️ ",
  多云: "🌥️",
  雷阵雨: "🌩️",
});
const weatherData = ref({
  high: "",
  low: "",
  type: "小雨",
});
const ipInfo = ref({
  ip: "xxx.xxx.xxx.xxx",
  address: "xx xx xxx",
  time: "xxxx-xx-xx xx:xx:xx",
});
const diaryList = ref([]);
const myScrollbar = ref();
const fadeOverlayBottom = ref();
const fadeOverlayTop = ref();
const myEmoji = ref(null);
const hour = new Date().getHours();
const presentTimeText = ref("");
const customIcon = () => {
  // 这里可以是一个图标组件或者图片
  return h("img", {
    src: "/src/assets/img/111.gif",
    style: "width: 100%; height: auto;",
  });
};

onMounted(() => {
  console.log("Home", store.state);
  if (store.state.userInfo) {
    headUrl.value = store.state.userInfo.head;
  }
  userName.value = store.state.userInfo?.userName ?? "游客";
  getWeatherByCity({ cityCode: "101280101" }).then((res) => {
    const newData = JSON.parse(res.data);
    weatherData.value = newData.data.forecast[0];
  });
  getIp().then((res) => {
    ipInfo.value.ip = res.data.ip;
    ipInfo.value.address = res.data.address;
    ipInfo.value.time = res.data.time;
  });
  refreshWord(true);
  presentTime();
  diaryList.value = [];
  diaryList.value = [
    {
      id: 1,
      time: "2018-04-03 20:46",
      title:
        "电风扇真是人类最好的朋友我只是问它我是不是长得丑它就很认真地对我摇了一晚上头。",
      label: "恋爱日记/记录",
    },
    {
      id: 1,
      time: "2018-04-03 20:46",
      title:
        "长这么大，没学到别的本事，就掌握了两项特殊技能：白天不用安眠药也能安眠，晚上不用喝咖啡也能兴奋。",
      label: "恋爱日记/记录",
    },
    {
      id: 1,
      time: "2018-04-03 20:46",
      title: "每天少吃一顿饭，时间一长就可以省下很大一笔钱，这笔钱可以留在以后看胃病用。",
      label: "恋爱日记/记录",
    },
    {
      id: 1,
      time: "2018-04-03 20:46",
      title:
        "刚才去楼下取外卖，偶遇一个朋友，只好装作没看见。毕竟都是有朋友圈的人，这几天他在法国，而我在美国。",
      label: "恋爱日记/记录",
    },
    {
      id: 1,
      time: "2018-04-03 20:46",
      title: "人生的坎，过不去就是绝命谷；踏过去了，还有新的坎等着你。",
      label: "恋爱日记/记录",
    },
    {
      id: 1,
      time: "2018-04-03 20:46",
      title: "只要肯吃苦，就有吃不完的苦。",
      label: "恋爱日记/记录",
    },
  ];
  window.$notification.create({
    content: "(≧◡≦) ",
    // placement: "bottom-left",
    duration: 2500,
    placement: "bottom-right",
    avatar: () =>
      h(
        "div",
        {},
        h(
          NIcon,
          {
            color: "#349608", // 设置颜色为红色
            size: "24px", // 设置大小为24像素
          },
          { default: () => h(customIcon) }
        )
      ),
  });
});

const refreshWord = (isCache = false) => {
  getEverydaySaid({ isCache: isCache }).then((res) => {
    if (res.code == 200) {
      wordData.value = res.data.data;
    }
  });
};

const presentTime = () => {
  if (hour >= 5 && hour < 12) {
    //早上
    presentTimeText.value = "早上好";
  } else if (hour >= 12 && hour < 15) {
    //中午
    presentTimeText.value = "中午好";
  } else if (hour >= 15 && hour < 18) {
    //下午
    presentTimeText.value = "下午好";
  } else {
    //晚上
    presentTimeText.value = "晚上好";
  }
  // presentTimeText.value+=`，欢迎回来👋<${user.value}>`
  console.log(presentTimeText.value.length);
};

const copyWord = () => {
  navigator.clipboard
    .writeText(wordData.value.content) // 调用 Clipboard API 复制文字到剪贴板
    .then(() => {
      window.$message.success("复制成功！");
    });
};

const checkScroll = (e) => {
  let windowHeitht = e.target.clientHeight; //能看到的页面的高度
  let scrollHeight = e.target.scrollHeight; //监控的整个div的高度（包括现在看到的和上下隐藏起来看不到的）
  let total = e.target.scrollTop + windowHeitht;

  //到底部设置虚化高度为0 设置底部虚化
  if (total >= scrollHeight - 10) {
    fadeOverlayBottom.value.style.height = "0px";
  } else {
    fadeOverlayBottom.value.style.height = "20px";
  }

  //到顶部设置虚化高度为0 设置顶部虚化
  if (e.target.scrollTop <= 10) {
    fadeOverlayTop.value.style.height = "0px";
  } else {
    fadeOverlayTop.value.style.height = "20px";
  }
};

const openExternalLink = (href) => {
  window.open(href, "_blank");
};

const btn_info = () => {
  window.$notification.create({
    style: {
      borderRadius: "10px",
      background: "#000",
    },
    max: 1,
    content: "(≧◡≦) ",
    // placement: "bottom-left",
    duration: 2500,
    placement: "bottom-right",
    avatar: () =>
      h(
        "div",
        {},
        h(
          NIcon,
          {
            color: "#349608", // 设置颜色为红色
            size: "24px", // 设置大小为24像素
          },
          { default: () => h(customIcon) }
        )
      ),
    // content: () =>
    //   h(
    //     NAlert,
    //     {
    //       icon: () => h(NIcon, null, { default: () => h(customIcon) }),
    //       type: "success",
    //       bordered: false,
    //       style: {
    //         boxShadow: "var(--n-box-shadow)",
    //         borderRadius: "10px",
    //         background: "#FFF",
    //       },
    //     },
    //     {
    //       default: () => "网站正在建设中...",
    //       icon: () => h(NIcon, null, { default: () => h(customIcon) }),
    //     }
    //   ),
  });

  window.$message.create("网站正在建设中...", {
    // icon: () => h(NIcon, null, { default: () => h(customIcon) }),
    duration: 2500,
    render: () =>
      h(
        NAlert,
        {
          icon: () => h(NIcon, null, { default: () => h(customIcon) }),
          type: "success",
          bordered: false,
          style: {
            boxShadow: "var(--n-box-shadow)",
            borderRadius: "10px",
            background: "#FFF",
          },
        },
        {
          default: () => "网站正在建设中...",
          icon: () => h(NIcon, null, { default: () => h(customIcon) }),
        }
      ),
  });
};
const jumpWebsite = () => {
  let path = "/dashboard/website";
  router.push({ path: path, replace: true });
  let index = 0;
  for (let i = 0; i < adminMenus.length; i++) {
    const element = adminMenus[i];
    for (let j = 0; j < element.children.length; j++) {
      let cKey = element.children[j].key;
      console.log(element.children[j].key);
      if (cKey == path) {
        index = i;
        break;
      }
    }
  }
  store.dispatch("updateMenuKeySaync", index);
  store.dispatch("updateChildrenKeySaync", path);
};
</script>

<style scoped lang="scss">
.p-card {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .p-h1 {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;

    span {
      font-size: 20px;
      font-weight: 600;
    }
  }

  .p-h2 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-direction: row !important;
    justify-content: space-between;

    .p-h2-d1 {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }

    .p-h2-d2 {
      min-height: 100px;
    }
  }

  .p-span {
    display: flex;

    span {
      position: relative;
      display: inline-block;
      color: #811717;
      /* 执行动画：动画名 时长 加速后减速 无限次播放 */
      animation: wavyAnimate 1s ease-in-out;
      /* 通过var函数调用自定义属性--i，再计算出动画延迟时间 */
      animation-delay: calc(0.1s * var(--i));
    }
    .shake {
      animation: shake-t 3.5s infinite; /* 应用动画 */
      display: inline-block;
    }
    @keyframes shake-t {
      0% {
        transform: rotate(0deg);
      }
      1% {
        transform: rotate(1deg);
      }
      2% {
        transform: rotate(2deg);
      }
      3% {
        transform: rotate(3deg);
      }
      4% {
        transform: rotate(4deg);
      }
      5% {
        transform: rotate(5deg);
      }
      6% {
        transform: rotate(6deg);
      }
      7% {
        transform: rotate(7deg);
      }
      8% {
        transform: rotate(8deg);
      }
      9% {
        transform: rotate(9deg);
      }
      10% {
        transform: rotate(10deg);
      }
      11% {
        transform: rotate(11deg);
      }
      12% {
        transform: rotate(12deg);
      }
      13% {
        transform: rotate(13deg);
      }
      14% {
        transform: rotate(14deg);
      }
      15% {
        transform: rotate(15deg);
      }
      16% {
        transform: rotate(16deg);
      }
      17% {
        transform: rotate(17deg);
      }
      18% {
        transform: rotate(18deg);
      }
      19% {
        transform: rotate(19deg);
      }
      20% {
        transform: rotate(20deg);
      }
      21% {
        transform: rotate(21deg);
      }
      22% {
        transform: rotate(22deg);
      }
      23% {
        transform: rotate(23deg);
      }
      24% {
        transform: rotate(24deg);
      }
      25% {
        transform: rotate(25deg);
      }
      26% {
        transform: rotate(24deg);
      }
      27% {
        transform: rotate(23deg);
      }
      28% {
        transform: rotate(22deg);
      }
      29% {
        transform: rotate(21deg);
      }
      30% {
        transform: rotate(20deg);
      }
      31% {
        transform: rotate(19deg);
      }
      32% {
        transform: rotate(18deg);
      }
      33% {
        transform: rotate(17deg);
      }
      34% {
        transform: rotate(16deg);
      }
      35% {
        transform: rotate(15deg);
      }
      36% {
        transform: rotate(14deg);
      }
      37% {
        transform: rotate(13deg);
      }
      38% {
        transform: rotate(12deg);
      }
      39% {
        transform: rotate(11deg);
      }
      40% {
        transform: rotate(10deg);
      }
      41% {
        transform: rotate(9deg);
      }
      42% {
        transform: rotate(8deg);
      }
      43% {
        transform: rotate(7deg);
      }
      44% {
        transform: rotate(6deg);
      }
      45% {
        transform: rotate(5deg);
      }
      46% {
        transform: rotate(4deg);
      }
      47% {
        transform: rotate(3deg);
      }
      48% {
        transform: rotate(2deg);
      }
      49% {
        transform: rotate(1deg);
      }
      50% {
        transform: rotate(0deg);
      }
      51% {
        transform: rotate(-1deg);
      }
      52% {
        transform: rotate(-2deg);
      }
      53% {
        transform: rotate(-3deg);
      }
      54% {
        transform: rotate(-4deg);
      }
      55% {
        transform: rotate(-5deg);
      }
      56% {
        transform: rotate(-6deg);
      }
      57% {
        transform: rotate(-7deg);
      }
      58% {
        transform: rotate(-8deg);
      }
      59% {
        transform: rotate(-9deg);
      }
      60% {
        transform: rotate(-10deg);
      }
      61% {
        transform: rotate(-11deg);
      }
      62% {
        transform: rotate(-12deg);
      }
      63% {
        transform: rotate(-13deg);
      }
      64% {
        transform: rotate(-14deg);
      }
      65% {
        transform: rotate(-15deg);
      }
      66% {
        transform: rotate(-16deg);
      }
      67% {
        transform: rotate(-17deg);
      }
      68% {
        transform: rotate(-18deg);
      }
      69% {
        transform: rotate(-19deg);
      }
      70% {
        transform: rotate(-20deg);
      }
      71% {
        transform: rotate(-21deg);
      }
      72% {
        transform: rotate(-22deg);
      }
      73% {
        transform: rotate(-23deg);
      }
      74% {
        transform: rotate(-24deg);
      }
      75% {
        transform: rotate(-25deg);
      }
      76% {
        transform: rotate(-24deg);
      }
      77% {
        transform: rotate(-23deg);
      }
      78% {
        transform: rotate(-22deg);
      }
      79% {
        transform: rotate(-21deg);
      }
      80% {
        transform: rotate(-20deg);
      }
      81% {
        transform: rotate(-19deg);
      }
      82% {
        transform: rotate(-18deg);
      }
      83% {
        transform: rotate(-17deg);
      }
      84% {
        transform: rotate(-16deg);
      }
      85% {
        transform: rotate(-15deg);
      }
      86% {
        transform: rotate(-14deg);
      }
      87% {
        transform: rotate(-13deg);
      }
      88% {
        transform: rotate(-12deg);
      }
      89% {
        transform: rotate(-11deg);
      }
      90% {
        transform: rotate(-10deg);
      }
      91% {
        transform: rotate(-9deg);
      }
      92% {
        transform: rotate(-8deg);
      }
      93% {
        transform: rotate(-7deg);
      }
      94% {
        transform: rotate(-6deg);
      }
      95% {
        transform: rotate(-5deg);
      }
      96% {
        transform: rotate(-4deg);
      }
      97% {
        transform: rotate(-3deg);
      }
      98% {
        transform: rotate(-2deg);
      }
      99% {
        transform: rotate(-1deg);
      }
      100% {
        transform: rotate(0deg);
      }
    }
  }

  /* 定义动画 */
  @keyframes wavyAnimate {
    0% {
      transform: translateY(0);
    }

    20% {
      transform: translateY(-10px);
    }

    40%,
    100% {
      transform: translateY(0);
    }
  }
}

.page-main {
  .card {
    column-count: 2; // 定义三列
    column-gap: 20px; // 列与列的距离为20px

    .card-item {
      grid-row-start: auto;
      margin-bottom: 10px;
      break-inside: avoid; // 不被截断

      p {
        font-size: 20px;
      }

      .p-h2 {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      .p-word {
        overflow-wrap: break-word;
        padding: 10px;
        border-radius: 5px;
        word-wrap: break-word;
        background: #ddeefa;
        display: flex;
        flex-direction: column;
      }

      .p-tag {
        display: flex;
        /* 允许换行 */
        flex-wrap: wrap;

        .p-tag-card {
          /* 每个元素占据 1/3 的宽度，并减去一些间距 */
          flex: 1 1 calc(33.333% - 10px);
          margin: 5px;
          box-sizing: border-box;
          min-width: 180px;
          cursor: pointer;
        }
      }

      .timeline-item {
        display: flex;
        justify-content: space-between;
        // white-space: nowrap;
        align-items: center;
        gap: 7px;
        margin-bottom: 5px;
      }

      /* 操纵before结合hover实现循序渐进的下划线 */
      .fadeIn-p {
        text-decoration: none;
        color: #333;
        position: relative;
        cursor: pointer;
        display: inline-block;
        padding: 2px;
      }

      .fadeIn-p::before {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        height: 2px;
        background-color: #3adb1d;
        width: 0;
        -webkit-transition: width 0.2s linear;
        transition: width 0.2s linear;
      }

      .fadeIn-p:hover::before {
        width: 100%;
        -webkit-transition: width 0.2s linear;
        transition: width 0.2s linear;
      }

      .fade-overlay {
        position: absolute;
        pointer-events: none;
        /* 确保鼠标事件穿透到下面的内容 */
        transition: height 0.3s ease;
        /* 0.3秒的高度平滑过渡，缓动函数为ease */
      }

      .fade-overlay.top,
      .fade-overlay.bottom,
      .fade-overlay.left,
      .fade-overlay.right {
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }

      .fade-overlay.top {
        top: 0;
        left: 0;
        right: 0;
        height: 0px;
        /* 调整高度以达到所需的虚化宽度 */
      }

      .fade-overlay.bottom {
        bottom: 0;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(
          to top,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }

      .fade-overlay.left {
        top: 0;
        bottom: 0;
        left: 0;
        width: 20px;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }

      .fade-overlay.right {
        top: 0;
        bottom: 0;
        right: 0;
        width: 20px;
        background: linear-gradient(
          to left,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }
    }
  }
}
</style>
<style scoped lang="css">
.box {
  width: 40%;
  height: 300px;
  border: 1px solid #00bbff;
  position: relative;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  transform: translateY(-50%);
  position: absolute;
}

.box::before {
  content: " ";
  position: absolute;
  width: 4px;
  height: 100%;
  top: -100%;
  left: 0;
  background-image: linear-gradient(0deg, transparent, #74efff, transparent);
  animation: two 4s linear infinite;
}

.box::after {
  content: " ";
  position: absolute;
  width: 4px;
  height: 100%;
  bottom: -100%;
  right: 0;
  background-image: linear-gradient(360deg, transparent, #202324, transparent);
  animation: four 4s linear 2s infinite;
}

.box i {
  position: absolute;
  display: inline-block;
  height: 4px;
  width: 100%;
}

.box .bottom {
  bottom: 0;
  left: -100%;
  background-image: linear-gradient(270deg, transparent, #d5ff74, transparent);
  animation: one 4s linear 1s infinite;
}

.box .top {
  top: 0;
  right: -100%;
  background-image: linear-gradient(270deg, transparent, #ff9774, transparent);
  animation: three 4s linear 3s infinite;
}

@keyframes one {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

@keyframes two {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

@keyframes three {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

@keyframes four {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}

::v-deep(.n-message) {
  border-radius: 10px !important;
}
</style>
